<!--
* @author: lzm
* @date: 2023年11月27日10:52:10
* @description：人员管理新增/编辑弹窗
* @update: 2023年11月27日10:52:16
-->
<template>
  <div>
    <el-dialog
      :title='title'
      :visible='showDialog'
      width='641px'
      center
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      custom-class='my-dialog hardConfig'
      @close='close'
    >
      <div class='form-top' v-loading='loading' element-loading-text='量程获取中...'
           element-loading-background='rgba(0, 0, 0, .7)'>
        <el-form ref='ruleForm' :rules='rules' label-width='120px' :model='addList'>
          <el-form-item label='磅位' prop='weightCode'>
            <el-input
              v-model='addList.weightCode'
              placeholder='请输入磅位'
              style='width: 90%'
              size='small'
            />
          </el-form-item>
          <el-form-item label='量程' prop='weightMax'>
            <el-input
              v-model='addList.weightMax'
              placeholder='请输入量程'
              style='width: 90%'
              size='small'
            >
              <template #suffix>
                <el-button type='text' @click='getTheRange'>获取</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label='当前重量'>
            <div class='weight-box' style='width: 90%'>
              <div class='weight-num'>{{ weightNum || 0 }}g</div>
              <div class='operate'>
                <el-button
                  type='primary'
                  @click='peelOffBtn'
                  class='chamfer-corners-8'>
                  去皮归零
                </el-button>
                <el-button
                  type='primary'
                  @click='getWeightBtn(true)'
                  class='chamfer-corners-8'>
                  获取重量
                </el-button>
              </div>
            </div>
          </el-form-item>
          <!-- 按钮 -->
          <el-row type='flex' justify='center'>
            <el-col :span='12'>
              <el-button
                :loading='loadingBtn'
                class='dialog-btn'
                size='mini'
                type='primary'
                @click='configBtn'>
                确认
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getWeightMax, positionDetail, updatePosition } from '@/api/shelfManage'
import { updateSingleWeightStatus, zero } from '@/api/locatorManage'

export default {
  props: {
    // 是否显示弹窗
    showDialog: {
      type: Boolean,
      default: false
    },
    // 弹窗标题
    title: {
      type: String,
      default: '硬件配置'
    },
    // 硬件配置数据
    positionData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // websocket数据
    wsData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      // 弹窗数据
      addList: {
        weightCode: '', // 磅位
        weightMax: '' // 量程
      },
      // 是否显示loading
      loading: false,
      // 库位id
      positionId: null,
      // 定时器
      timer: null,
      timeNum:0,
      //  当前重量
      weightNum: 0,
      // 确认按钮loading
      loadingBtn: false,
      // 验证规则
      rules: {
        weightCode: [
          { required: true, message: '请输入磅位', trigger: 'blur' }
        ],
        weightMax: [
          { required: true, message: '请输入量程', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    // positionData: {
    //   handler(val) {
    //     this.positionId = val.id
    //     this.getDialogData()
    //   },
    //   deep: true
    // },
    wsData: {
      handler(val) {
        //console.log(val)
        this.weightNum = val.message.includes('_') ? val.message.split('_')[0] : val.message
      },
      deep: true
    },
    showDialog: {
      handler(val) {
        if (val) {
          this.positionId = this.positionData.id
          this.getDialogData()
          this.getWeightBtn(false)
          // this.addList = {
          //   weightCode: '',
          //   weightMax: ''
          // };
          this.weightNum = 0;
        }
      }
    }
  },
  methods: {
    // 获取弹窗数据信息
    getDialogData() {
      positionDetail({ positionId: this.positionId }).then((res) => {
        this.addList.weightCode = res.result.weightCode
        this.addList.weightMax = res.result.weightMax
        if (Number(res.result.weightMax)>0){
          this.loading=false
          this.timeNum=0
          if (this.timer) {
            clearInterval(this.timer)
          }
        }
      }).catch(()=>{
        this.loading=false
      })
    },
    // 关闭弹窗清空所有值
    close() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.loading=false
      this.timeNum=0
      updateSingleWeightStatus({ id: this.positionId, status: false })
      this.$emit('update:showDialog', false)
      this.$emit('update:id', null)
      this.$refs.ruleForm.resetFields()
      this.addList = {
        weightCode: '',
        weightMax: ''
      }
    },
    // 去皮归零
    peelOffBtn() {
      zero({ id: this.positionId }).then(res => {
        if (res.status === '2000') {
          this.$message.success('去皮归零成功！')
        }
      })
    },
    // 获取重量
    getWeightBtn(flag) {
      updateSingleWeightStatus({ id: this.positionId, status: true }).then(res => {
        if (res.status === '2000' && flag) {
          this.$message.success('获取重量成功！')
        }
      })
    },
    // 获取量程
    getTheRange() {
      this.loading = true
      getWeightMax({ positionId: this.positionId }).then((res) => {
        this.timer=setInterval(()=>{
          this.timeNum++
          this.getDialogData()
          if (this.timeNum >= 6) {
            clearInterval(this.timer);
            this.loading=false
          }
        },2000)
      }).catch(() => {
        this.loading = false
      })
    },
    // 点击确认按钮
    configBtn() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loadingBtn = true
          updatePosition({
            id: this.positionId,
            weightCode: this.addList.weightCode,
            weightMax: this.addList.weightMax
          }).then(() => {
            this.$message({
              type: 'success',
              message: '配置成功'
            })
            this.loadingBtn = false
            this.$emit('update:showDialog', false)
            this.$emit('configComplete')
          }).catch(() => {
            this.loadingBtn = false
          })
        }
      })
    }
  }
}
</script>
<style scoped lang='scss'>

::v-deep .hardConfig {
  .el-row {
    text-align: center;
  }
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: '';
    color: #F56C6C;
    margin-right: 4px;
  }
  .el-dialog__body {
    .el-form-item__label {
      margin-right: 5px;
      font-size: 18px;
      color: #fff;
      line-height: 48px;
      font-weight: normal;
      padding-left: 32px;
      text-align-last: justify;
    }

    .el-input--small .el-input__inner {
      height: 48px;
      line-height: 48px;
      font-size: 16px;
    }

    .el-form-item__content {
      line-height: 48px;
    }

    .el-input__suffix {
      top: 4%;
      right: 20px;

      .el-button {
        font-size: 17px;
        color: #062343;
        font-weight: 600;
      }
    }

    .dialog-btn {
      margin-top: 10px;
      font-size: 18px;
      height: 40px;
    }

    .weight-box {
      display: flex;
      justify-content: space-between;

      .weight-num {
        margin-left: 16px;
        color: #fff;
        font-size: 18px;
      }

      .operate {
        .el-button {
          font-size: 16px;
        }
      }
    }
  }

  .form-top {
    padding: 20px;
  }
}

</style>
